
$.get("/kb/data",function(data,status){
console.log(data);
var kbdata = data  ;
 //var kbdata = [{ "shop": "拼多多", "person": "刘家星", "date": "202201", "persent": 79 }, { "shop": "五羊旗舰店", "person": "万日深", "date": "202201", "persent": 60 }, { "shop": "FR旗舰店", "person": "钟伟福", "date": "202201", "persent": 58 }, { "shop": "京东自营-家清", "person": "周永超/林小翠", "date": "202201", "persent": 57 }, { "shop": "猫超-洗护", "person": "邓永丹", "date": "202201", "persent": 54 }, { "shop": "唯品会-纸尿裤", "person": "唯品会", "date": "202201", "persent": 49 }, { "shop": "王子事业部", "person": "王子", "date": "202201", "persent": 43 }, { "shop": "薄薄芯旗舰店", "person": "薄薄", "date": "202201", "persent": 42 }]
console.log(kbdata);
var categories = []; data = [];
for (var i = 0; i < kbdata.length; i++) {
	categories.push(kbdata[i].shop);
};
for (var j = 0; j < kbdata.length; j++) {
	data.push(kbdata[j].persent);
};


var id1 = 11;
var id2 = 12;
var id3 = 13;
var id4 = 14;
for (var s = 0; s < 5; s++) {
	document.getElementById(id1).innerHTML = kbdata[s].shop
	document.getElementById(id2).innerHTML = kbdata[s].person
	document.getElementById(id3).innerHTML = kbdata[s].date
	document.getElementById(id4).innerHTML = kbdata[s].persent + "%"
	id1 = id1 + 10;
	id2 = id2 + 10;
	id3 = id3 + 10;
	id4 = id4 + 10;
}


$(document).ready(function () {
	var chart = {
		type: 'column',
		marginTop: 100,
	};
	var title = {
		text: ''
	};

	var xAxis = {
		categories: categories,
		crosshair: true,
		labels: {
			rotation: 330,
			style: { "color": "black", "cursor": "default", "fontSize": "60px" }
		}
	};
	var yAxis = {
		min: 0,
		title: {
			style: { "color": "#black", "cursor": "default", "fontSize": "60px" },
			text: '完成率 ( %)'
		},
		labels: {
			style: { "color": "#black", "cursor": "default", "fontSize": "60px" }
		}

	};
	var tooltip = {
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </				td>' + '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true,
	};
	var plotOptions = {
		column: {
			stacking: 'normal',
			dataLabels: {
				useHTML: true,
				verticalAlign: top,
				y: -50,
				enabled: true,
				format: '{y}%',
				color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
				style: {
					textOutline: '2px 2px wirte',
					fontSize: '40px',
				}
			},


			pointPadding: 0.2,
			borderWidth: 0
		}
	};

	var series = [{
		name: '',

		data: data
	}];

	var json = {};
	json.chart = chart;
	json.title = title;
	json.tooltip = tooltip;
	json.xAxis = xAxis;
	json.yAxis = yAxis;
	json.series = series;
	json.plotOptions = plotOptions;
	$('#container').highcharts(json);
});

 });